<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}

import { onMounted, ref, reactive, defineProps } from 'vue';
//const { } = defineProps<Props>();
import { usePayStore } from '@/store'
import { priceWay } from '@/public/data'
import Box from '@/components/Box/index.vue'
import AliIcon from '@/components/AliIcon/index.vue'

/**
 * @property 变量
 */
const payStore = usePayStore();

/**
 * @property  所有请求以api开头 如:apiDataInfo
 */


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

// 单选第三方支付类型
const changePayWay = (e: { detail: { value: PayType } }) => {
    payStore.payType = e.detail.value;
}
/**
 * @property 内置方法
 */


</script>
<template>
    <Box title="支付方式">
        <radio-group @change="changePayWay">
            <div class="mt-3.5 bg-[#F9F9F9] h-92 fra pl-3.5 b-rd-2"
                v-for="item in priceWay.filter(v => v.key.includes(payStore.payMethod))" :key="item.payType">
                <AliIcon :icon-name="item.icon" fontSize="40" :color="item.iconColor" />
                <text class="c-[#777777] ml-2 flex-1">{{ item.name }}</text>
                <radio :checked="item.payType === payStore.payType" :value="item.payType" color="#00BD78"></radio>
            </div>
        </radio-group>
    </Box>
</template>
<style lang="scss" scoped></style>